<template>
  <div>
    <div id="printLayer">
      <h3>{{ goodsItem.orderName }}</h3>
      <table class="header">
        <tr>
          <td>供应商：{{ goodsItem.orgName }}</td>
          <td>总数量：{{ goodsItem.goodsTotalQty }}</td>
          <td>总金额(元)：￥{{ goodsItem.orderPayableAmt ? goodsItem.orderPayableAmt.toFixed(2) : 0.00 }}</td>
        </tr>
        <tr>
          <td>联系人：{{ address.consigneeName }}</td>
          <td>联系电话：{{address.consigneeMobile}}</td>
          <td>收货地址：{{ address.addressDetail }}</td>
        </tr>
        <tr>
          <td>订单号：{{ goodsItem.shopOrderId }}</td>
          <td>客户名称：{{goodsItem.shopName}}</td>
          <td>订单日期：{{ dateFormat(goodsItem.postTime) }}</td>
        </tr>
      </table>
      <table class="dataline">
        <tr>
          <th>商品名称</th><th>商品条码</th><th>进价(元)</th><th>数量</th><th>单位</th><th>金额(元)</th>
        </tr>
        <tr v-for="(item,id) in dataGrid" :key="id">
          <td>{{item.goodsName}}</td>
          <td>{{item.eanCode}}</td>
          <td>{{item.salePrice ? item.salePrice.toFixed(2) : 0.00}}</td>
          <td>{{item.goodsQty}}</td>
          <td>{{item.skuUom}}</td>
          <td>{{item.payableAmt ? item.payableAmt.toFixed(2) : 0.00}}</td>
        </tr>
      </table>
      <table class="footer">
        <tr>
          <td>配送人签字：______________</td>
          <td>收货人签字：______________</td>
        </tr>
      </table>
    </div>
    <Button type="primary" v-print="printConfig">打印</Button>
  </div>
</template>
<script>
import print from 'vue-print-nb'
export default {
  name: "create",
  data() {
    return {
      dataGrid: [],
      address: {},
      printConfig: {
        id: 'printLayer',
        //popTitle: '采购单',
        preview: false,
        //previewTitle: '采购单',
        //previewPrintBtnLabel: '预览结束，点击打印',
        zIndex: 200000
      }
    }
  },
  directives: {
    print
  },
  props: {
    goodsItem: Object
  },
  methods: {
    dateFormat(time) {
      return this.$date(time,'yyyy年MM月dd日')
    },
    init(id) {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/goods/order/detail/page",
        query: {
          pageIndex: 1,
          pageSize: 1000,
          equal: {
            shopOrderId: id
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data.list
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).get()
    },
    orderAddr(id) {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/order/address/id",
        query: {
          equal: id
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.address = res.data.data
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).get()
    }
  },
};
</script>
<style lang="less" scoped>
#printLayer h3 {
  margin: 30px auto; text-align: center;
}
#printLayer table {
  border-collapse: collapse; width: 100%; margin: 10px auto;
}
#printLayer .header {
  font-size: 12px;
}
#printLayer .dataline {
  th, td {
    border: 1px solid #000000; padding: 5px 10px; font-size: 12px;
  }
}
#printLayer .footer {
  font-size: 12px; margin-top: 50px;
}
</style>

<style media="print" lang="less" scoped>
@page {
  margin: 5mm;
  size: auto;
}
@media print {
  #printLayer {
    width: 90%;
    zoom: 1;
    margin: 20px auto
  }
}
</style>